import React from "react";
import { useNavigate } from "react-router-dom";
import { WHITE_LIST, LOGIN_PATH, HOME_PATH } from "@/config/index.ts";
import { type MenuProps, Dropdown, Avatar, Modal, message } from "antd";
import { HomeOutlined, UserOutlined, FormOutlined, LoginOutlined, ExclamationCircleOutlined } from "@ant-design/icons";

const UserAvatar: React.FC = () => {
  const navigate = useNavigate();
  // 退出登录
  const handleLogout = () => {
    Modal.confirm({
      title: "温馨提示💖",
      content: "您确定要退出登录吗？",
      icon: <ExclamationCircleOutlined />,
      okText: "确定",
      cancelText: "取消",
      onOk: () => {
        // message.warning("退不了一点！");
        // 删除token 回到登陆页面
        sessionStorage.removeItem("token");
        navigate(LOGIN_PATH);
      },
    });
  };

  const items: MenuProps["items"] = [
    {
      key: "1",
      label: <span>首页</span>,
      icon: <HomeOutlined style={{ fontSize: "14px" }} />,
      onClick: () => navigate(HOME_PATH),
    },
    {
      key: "2",
      label: <span>个人信息</span>,
      icon: <UserOutlined style={{ fontSize: "14px" }} />,
      // onClick: () => infoRef.current?.showModal({ name: 'hooks' })
    },
    {
      key: "3",
      label: <span>修改密码</span>,
      icon: <FormOutlined style={{ fontSize: "14px" }} />,
      // onClick: () => passRef.current?.showModal({ name: 'hooks' })
    },
    {
      type: "divider",
    },
    {
      key: "4",
      label: <span>退出登录</span>,
      icon: <LoginOutlined style={{ fontSize: "14px" }} />,
      onClick: handleLogout,
    },
  ];

  return (
    <>
      <Dropdown menu={{ items }} trigger={["click"]} placement="bottom" arrow>
        <Avatar
          style={{ backgroundColor: "#87d068", cursor: "pointer" }}
          size={42}
          src="https://cdn.pixabay.com/photo/2021/11/12/03/04/woman-6787784_1280.png"
        />
      </Dropdown>
    </>
  );
};

export default UserAvatar;
